<template>
    <view>
        <z-paging
            ref="paging"
            :refresher-out-rate="0.8"
            :show-empty-view-reload-when-error="false"
            :empty-view-img-style="{ width: '308rpx', height: '308rpx' }"
            empty-view-error-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/1c53b8aed0c74201bb092265803a1d48.png"
            empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
            empty-view-error-text="暂无数据"
            bg-color="#F9FAFC"
            v-model="dataList"
            @query="queryList"
        >
            <view>
                <view class="topBox">
                    <view class="flex_wrap row_between topDetail">
                        <view class="flex_wrap">
                            <u-avatar
                                size="168rpx"
                                mode="aspectFill"
                                :src="
                                    userInfo.avatar
                                        ? userInfo.avatar
                                        : 'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/23/0e6265fd99fa49a9bacf3791420d6de6.png'
                                "
                            />
                            <view class="infoDetail">
                                <u--text
                                    :text="userInfo.salesmanName"
                                    color="#fff"
                                    size="46rpx"
                                    bold
                                />
                                <u--text
                                    @click="copeMobile()"
                                    suffixIcon="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/01/18/e8b194669d3049de93016867e7b69a5f.png"
                                    iconStyle="font-size: 32rpx;margin-left:16rpx"
                                    color="#fff"
                                    size="28rpx"
                                    :text="`电话：${userInfo.mobile}`"
                                    margin="12rpx 0"
                                />
                                <u--text
                                    @click="copeWechat()"
                                    suffixIcon="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/12/21/b5a1d87a96254549810a185f5720fcd6.png"
                                    iconStyle="font-size: 32rpx;margin-left:16rpx"
                                    color="#fff"
                                    size="28rpx"
                                    :text="`微信：${
                                        userInfo.wechatNumber || '暂未设置'
                                    }`"
                                />
                            </view>
                        </view>
                        <view>
                            <u-icon
                                name="/static/images/sph.png"
                                size="48rpx"
                                label="视频号"
                                labelSize="28rpx"
                                space="8rpx"
                                labelColor="#fff"
                                @click="sphBtn()"
                            ></u-icon>
                        </view>
                    </view>
                    <view class="content">
                        <view class="resumeClass" v-if="userInfo.resume">
                            <text class="my_text" space="ensp">{{
                                userInfo.resume
                            }}</text>
                        </view>
                        <view v-for="em in addressList" style="display: flex">
                            <u-icon
                                color="#1682FF"
                                size="40rpx"
                                name="map-fill"
                            ></u-icon>
                            <view class="addrBox" @click="goMap(em)">
                                {{ em.address }}（{{ em.name }}）</view
                            >
                            <!-- <view class="addrBox">
								<u--text :prefixIcon="
                					    userInfo.sex
                					        ? 'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/07/d823dbc4004048e88f816d6b988a7d9b.png'
                					        : 'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/07/d80a0515bc9e40e2a6fc8e5df6f9719d.png'
                					" iconStyle="font-size: 28rpx;margin-right:10rpx" text="--岁" color="#777"
									size="24rpx"></u--text>
							</view> -->
                        </view>
                        <view class="btns">
                            <u-button
                                :customStyle="sxBtnStyle"
                                @click="privateLetter()"
                                iconColor="#fff"
                                icon="chat"
                                text="私信"
                            ></u-button>
                        </view>
                    </view>
                </view>
            </view>

            <u-sticky v-if="showTap">
                <view class="tabs">
                    <u-tabs
                        :list="navList"
                        @click="click"
                        @change="changeType"
                        :current="currentTab"
                        :scrollable="false"
                        :inactiveStyle="inactiveStyle"
                        :activeStyle="activeStyle"
                        lineColor="#1682FF"
                    ></u-tabs>
                </view>
            </u-sticky>
            <view class="cellBox">
                <!-- 列表 -->
                <!-- 个人风采 -->
				<view class="u_parse" v-if="currentTab === 0 && !myStyleShow">
					<!-- <u-parse :content="useInterest"></u-parse> -->
					<rich-text :nodes="useInterest" class="wrapper"></rich-text>
				</view>
                <view v-if="currentTab === 0 && myStyleShow">
                    <view v-if="myStyle.length">
                        <view class="wrap">
                            <view
                                class="album__content"
                                v-for="item in myStyle"
                                :key="item.id"
                            >
                                <u-text
                                    margin="16px 0"
                                    :text="item.text"
                                    :key="item.id"
                                    lineHeight="40rpx"
                                ></u-text>
                                <image
                                    v-for="(e, i) in item.img"
                                    :src="e.url || e"
                                    mode="widthFix"
                                    :key="i"
                                ></image> </view
                        ></view>
                    </view>
                </view>
                <view style="padding: 0 32rpx" v-if="currentTab === 1">
                    <view class="news">
                        <view
                            class="news_list"
                            v-for="(item, index) in dataList"
                            :key="index"
                            :data-index="index"
                            @touchstart="drawStart"
                            @touchmove="drawMove"
                            @touchend="drawEnd"
                            :style="'right:' + item.right + 'px'"
                        >
                            <view
                                class="news_detail flex_wrap row_between"
                                @click="editData(item.id, item.recordType, 2)"
                            >
                                <u-image
                                    height="136rpx"
                                    width="240rpx"
                                    :src="item.videoCover"
                                    mode="aspectFill"
                                    radius="8rpx"
                                />
                                <view style="flex: 1; padding-left: 12rpx">
                                    <text class="detail_t">{{
                                        item.videoIntro
                                    }}</text>

                                    <u-text
                                        :text="
                                            $u.timeFormat(
                                                item.createTime,
                                                'yyyy年mm月dd日'
                                            )
                                        "
                                        size="24rpx"
                                        color="#666"
                                        margin="26rpx 0 0 0"
                                    />
                                </view>
                            </view>
                            <view class="remove" @click="delData(item.id)"
                                >删 除</view
                            >
                            <view
                                class="edit"
                                @click="editData(item.id, item.recordType, 1)"
                                >编 辑</view
                            >
                        </view>
                    </view></view
                >
                <view
                    v-if="currentTab === 2"
                    class="videos flex_wrap row_between"
                >
                    <view
                        class="videos_list"
                        v-for="(item, index) in dataList"
                        :key="index"
                        @click="itemClick(item.id)"
                    >
                        <view class="videos_detail">
                            <image
                                :src="item.videoCover"
                                class="videos-img"
                                mode="aspectFit"
                            ></image>
                            <view class="videos-t flex_wrap">
                                <text>{{ item.videoIntro }}</text>
                            </view>
                            <view
                                class="videos-tt flex_wrap row_between row_middle"
                            >
                                <view class="flex_wrap">
                                    <u-avatar
                                        size="32rpx"
                                        :src="item.salesmanAvatar"
                                    />
                                    <u--text
                                        :text="item.salesmanName"
                                        color="#666"
                                        size="20rpx"
                                        margin="0 8rpx"
                                    />
                                </view>
                                <u-icon
                                    name="/static/images/myUser.png"
                                    size="24rpx"
                                    :label="item.likeNum"
                                    labelSize="24rpx"
                                    space="8rpx"
                                    labelColor="#3D3D3D"
                                    @click="addVideo()"
                                ></u-icon>
                            </view>
                        </view>
                    </view>
                </view>
                <view v-if="currentTab === 3" style="padding: 20rpx">
                    <!-- <u-album
                        :urls="dataList"
                        keyName="fileUrl"
                        maxCount="100000"
                        :multipleSize="110"
                    ></u-album> -->
                    <img
                        mode="aspectFill"
                        @click="itemImageClick(item)"
                        :src="item.fileUrl"
                        alt=""
                        v-for="item in dataList"
                        style="width: 30vw; height: 30vw; margin: 5rpx"
                    />
                </view>
                <view
                    class="item flex_wrap row_between"
                    v-if="currentTab === 4"
                >
                    <view
                        class="cellBox3"
                        v-for="(item, index) in dataList"
                        :key="index"
                    >
                        <u-cell
                            :iconStyle="cellIconStyle"
                            :titleStyle="cellTitleStyle"
                            size="large"
                            :arrow="false"
                            :border="false"
                            @click="to_goodsDetail(item.id)"
                        >
                            <view slot="title" class="celldetail">
                                <image
                                    :src="item.thumbnail"
                                    mode="aspectFit"
                                    class="celldetail-img"
                                ></image>
                                <view class="celldetail-t flex_wrap">
                                    <text
                                        style="font-size: 28rpx; color: #333333"
                                    >
                                        {{ item.goodsName }}
                                    </text>
                                </view>
                                <view class="shopping-cart-box">
                                    <view>
                                        <text style="font-size: 24rpx">￥</text>
                                        <text
                                            style="
                                                font-size: 34rpx;
                                                font-weight: 600;
                                            "
                                            >{{ goodsSkuListPrice(item) }}</text
                                        >
                                        <text style="font-size: 18rpx">起</text>
                                    </view>
                                </view>
                            </view>
                        </u-cell>
                    </view>
                </view>
            </view>
        </z-paging>
    </view>
</template>

<script>
import { baseUrl } from "@/config/tendIdConfig";
import { nouserCard, getCustomerIdBySalesmanId, chatRoom } from "@/api/card";
import {
    getCustomerByIdNoToken,
    getCustomerAddressNoToken,
} from "@/api/login.js";
import { mapGetters } from "vuex";
import { getCustomerGoodsListNoToken } from "@/api/shop.js";
import { numDiv } from "@/js_sdk/nl-precisionNum/precisionNum.js";
import { formatDecimal } from "@/utils/index.js";
export default {
    data() {
        return {
            dataList: [],
            userInfo: {},
            customerIdBySalesmanId: "",
            sxBtnStyle: {
                // width: '412rpx',
                height: "72rpx",
                borderRadius: "16rpx",
                backgroundColor: "#1682FF",
                fontSize: "32rpx",
                color: "#fff",
            },
            currentTab: 0,

            navList: [
                {
                    name: "风采",
                    status: 1, //查询条件 空字符串为查询全部 1:查待付款 2查待领取 3查已完成 4查退款
                },
                {
                    name: "资讯",
                    status: 2, //查询条件 空字符串为查询全部 1:查待付款 2查待领取 3查已完成 4查退款
                },
                {
                    name: "视频",
                    status: 3, //查询条件 空字符串为查询全部 1:查待付款 2查待领取 3查已完成 4查退款
                },
                {
                    name: "相册",
                    status: 4, //查询条件 空字符串为查询全部 1:查待付款 2查待领取 3查已完成 4查退款
                },
                {
                    name: "商城",
                    status: 5, //查询条件 空字符串为查询全部 1:查待付款 2查待领取 3查已完成 4查退款
                },
            ],
            customerId: "", //客户ID
            myStyle: [], //个人风采
            addressList: [], //地址
            showTap: false,
			myStyleShow:true,
			useInterest:''
        };
    },
    computed: {
        ...mapGetters(["showVideo", "isLogin"]),
        goodsSkuListPrice() {
            return (item) => {
                const money = item.price
                    ? formatDecimal(numDiv(item.price, 100))
                    : 0;
                return money;
            };
        },
    },
    onShow() {
        this.$nextTick(() => {
            setTimeout(() => {
                this.showTap = true;
                this.currentTab = this.currentTab;
            }, 10);
        });
    },
    onLoad(options) {
        console.log(options, "options");
        this.salesmanId = options.salesmanId;
        this.customerId = options.customerId;
        this.getBusinessCard(this.salesmanId);
        getCustomerAddressNoToken(this.customerId).then((r) => {
            if (r.code === 200) this.addressList = r.data;
        });
    },
    beforeDestroy() {
        if (this.isLogin) {
            uni.removeStorageSync("loginBackUrl");
            uni.removeStorageSync("loginBackUrlOption");
        }
    },
    methods: {
        to_goodsDetail(e) {
            //去详情先判断是否登录
            if (!this.isLogin) {
                var pages = getCurrentPages(); // 获取栈实例
                if (pages.length === 1) {
                    let currentRoute = pages[pages.length - 1].route; // 获取当前页面路由
                    let currentPage =
                        pages[pages.length - 1]["$page"]["fullPath"]; //当前页面路径(带参数)
                    uni.setStorageSync("loginBackUrl", currentPage);
                }
                return uni.navigateTo({
                    url: "/pages/user/phone/indexApp",
                });
            }
            uni.$u.route({
                url: `pages_shop1/goods/index?id=${e}`,
            });
        },
        goMap({ latitude, longitude, name }) {
            uni.openLocation({
                latitude: Number(latitude),
                longitude: Number(longitude),
                name,
                scale: 28,
            });
        },

        changeList(e) {
            console.log(e);
            this[e.name].push(e.value);
        },
        itemImageClick(item) {
            uni.navigateTo({
                url: `/pages_operate/poster/index?image=${item.image}`,
            });
        },
        sphBtn() {
            // APP端不支持wx.openChannelsUserProfile，提示用户
            uni.showToast({
                title: '该功能仅支持微信小程序',
                icon: 'none'
            });
        },
        copeMobile() {
            let data = this.userInfo.mobile;
            uni.makePhoneCall({
                phoneNumber: data, //仅为示例，并非真实的电话号码
                success: function () {
                    console.log("拨打电话成功！");
                },
                fail: function () {
                    console.log("拨打电话失败！");
                },
            });
        },

        copeWechat() {
            let data = this.userInfo.wechatNumber;
            uni.setClipboardData({
                data: data,
                success: (res) => {
                    uni.showToast({
                        title: "已复制微信",
                        duration: 2000,
                    });
                },
            });
        },
        async privateLetter(salesmanId) {
            if (!this.isLogin) {
                var pages = getCurrentPages(); // 获取栈实例
                if (pages.length === 1) {
                    let currentRoute = pages[pages.length - 1].route; // 获取当前页面路由
                    let currentPage =
                        pages[pages.length - 1]["$page"]["fullPath"]; //当前页面路径(带参数)
                    uni.setStorageSync("loginBackUrl", currentPage);
                }
                return uni.navigateTo({ url: "/pages/user/phone/indexApp" });
            }

            const res = await getCustomerIdBySalesmanId(this.salesmanId);
            if (res.data) {
                this.customerIdBySalesmanId = res.data;
                const result = await chatRoom(this.customerIdBySalesmanId);
                if (result.data) {
                    uni.$u.route({
                        url: "/pages_my1/dialogue/customeIndex",
                        params: {
                            roomId: result.data.roomId,
                            customerAvatar: this.userInfo.avatar,
                        },
                    });
                }
            } else {
                uni.showToast({
                    title: "该用户暂不支持私信！",
                    icon: "none",
                });
            }
        },
        async getBusinessCard(salesmanId) {
            //获取名片信息
            const res = await nouserCard(salesmanId);
            this.userInfo = res.data;
        },
        changeType(e) {
            this.$refs.paging.reload();
        },
        click(e) {
            this.currentTab = e.index;
        },
//解析富文本方法
		formatRichText(html) {
			let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
				match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
				match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
				match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
				return match;
			});
			newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
				match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
					'max-width:100%;');
				return match;
			});
			newContent = newContent.replace(/<br[^>]*\/>/gi, '');
			newContent = newContent.replace(/<p>/gi, '<br>');
			newContent = newContent.replace(/\<img/gi,
				'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
			return newContent;
		},
        async queryList(pageNo, pageSize) {
            const params = {
                pageNum: pageNo,
                pageSize: pageSize,
            };
            const that = this;
            console.log(this.customerId, "queryList :>> ", this.currentTab);
            switch (this.currentTab) {
                case 0:
                    const res = await getCustomerByIdNoToken(this.customerId);
                    if (res.data.myStyleType === "2"){
                    	console.log(res.data.myStyleType,'??????????')
                    	this.myStyleShow = false
                    	this.useInterest = this.formatRichText(res.data.myStyle)
                    	console.log(this.useInterest)
                    }else{
                    	this.myStyleShow = true
                    	this.myStyle = res.data.myStyle ? JSON.parse(res.data.myStyle) : [];
                    	console.log("myStyle", this.myStyle);
                    	!this.myStyle.length &&
                    	    this.$refs.paging.completeByTotal([], 0);
                    }
                    break;
                case 1:
                case 2:
                    const token =
                        this.$store.getters?.customer_token ||
                        uni.getStorageSync("customer_token");
                    uni.request({
                        url:
                            baseUrl +
                            "/customer/video_info_customer/open/pageVideoNoToken",
                        method: "POST",
                        header: {
                            Authorization: token,
                        },
                        data: {
                            ...params,
                            recordTypeSet: that.currentTab == 1 ? [1, 6] : [8],
                            releaseManId: that.salesmanId,
                            tenantId: this.$tendId,
                        },
                        success(res) {
                            const dataList = res.data.data?.rows ?? [];
                            that.$refs.paging.complete(dataList);
                        },
                    });
                    break;
                case 3:
                    console.log(
                        this.customerId,
                        "queryList :>>33333 ",
                        this.currentTab
                    );
                    const token1 =
                        this.$store.getters?.customer_token ||
                        uni.getStorageSync("customer_token");
                    uni.request({
                        url:
                            baseUrl + "/customer/objectFile/open/searchNoToken",
                        method: "POST",
                        header: {
                            Authorization: token1,
                        },
                        data: {
                            ...params,
                            unionType: 1001,
                            unionId: this.customerId,
                        },
                        success(res) {
                            let result = res.data;
                            result = result.data.rows.map((item) => {
                                return {
                                    image: item.fileUrl,
                                    title: item.fileName,
                                    width: 127,
                                    ...item,
                                };
                            });
                            console.log(result);
                            that.$refs.paging.complete(result);
                        },
                    });
                    break;
                case 4:
                    const goodsData = {
                        pageNum: pageNo,
                        pageSize: pageSize,
                        customerId: this.customerId,
                    };
                    let {
                        data: { rows },
                    } = await getCustomerGoodsListNoToken(goodsData);
                    that.$refs.paging.complete(rows);
                    break;
            }
        },
        itemClick(id) {
            uni.navigateTo({
                url: `/pages_video/videoNew/index?clickId=${id}`,
            });
        },
        editData(id, recordType, type) {
            console.log(id, recordType, type, "1111");
            if (recordType == 6) {
                this.$u.route({
                    url: "/pages_consultation/counsellings/ichrTextDetails",
                    params: {
                        id,
                    },
                });
            } else {
                this.$u.route({
                    url: "/pages_consultation/counsellings/detailsSalesman",
                    params: {
                        id,
                    },
                });
            }
        },
    },
};
</script>

<style scoped lang="scss">
.resumeClass {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    color: #3d3d3d;
    font-size: 32rpx;
    margin-bottom: 26rpx;
}
.my_text {
    word-break: break-word; //可以避免文字超出限制
}
.topBox {
    width: 100%;
    height: 100%;
    color: #000;
    background: url("https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/12/21/ce8efd9b506546b9822048ad0a250169.png")
        no-repeat;
    background-size: contain;
    box-sizing: border-box;
}

.topDetail {
    padding: 44rpx 40rpx;
}

.infoDetail {
    margin-left: 32rpx;
}

.content {
    border-radius: 40rpx 40rpx 0 0;
    background: #ffffff;
    padding: 32rpx 48rpx;
}

.addrBox {
    color: #1682ff;
    font-size: 24rpx;
    padding: 6rpx 20rpx;
    display: inline-block;
    margin-right: 24rpx;
    text-decoration: underline;
}

.btns {
    margin-top: 34rpx;
}
.tabs {
    background-color: #ffffff;
}

.news {
    height: auto;
    overflow: hidden;
    padding: 0 32rpx;
}

.news_list {
    display: flex;
    position: relative;
    flex-direction: row;
    border-bottom: 2rpx solid #d8d8d8;
}

.news_detail {
    padding: 32rpx 0;
}

.detail_t {
    display: block;
    width: 412rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 28rpx;
    color: #3d3d3d;
}
.videos {
    padding: 32rpx;
    box-sizing: border-box;
    flex-flow: wrap;
}
.videos_detail {
    width: 100%;
    box-sizing: border-box;
    border-radius: 8rpx 8rpx 0rpx 0rpx;
    margin-bottom: 20rpx;
    background-color: #fff;
}

.videos-img {
    width: 336rpx;
    height: 404rpx;
    border-radius: 8rpx 8rpx 0rpx 0rpx;
}

.videos-t {
    width: 336rpx;
    padding: 12rpx;
    box-sizing: border-box;

    text {
        width: 100%;
        font-size: 28rpx;
        color: #3d3d3d;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
}
.videos-tt {
    padding: 0 12rpx 18rpx;
}
.wrap {
    padding: 30rpx;
    // height: calc(100vh - 88rpx);
    // overflow-y: scroll; // 超出滚动
    // overscroll-behavior: none; // 禁止滚动溢出
}
// ------商城-----
.item {
    padding: 20rpx 28rpx;
    box-sizing: border-box;
    flex-flow: wrap;
}

.cellBox3 {
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
    box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.2);
}

::v-deep .u-cell__body {
    padding: 0 !important;
}

.celldetail {
    width: 100%;
    padding-bottom: 20rpx;
}

.celldetail-img {
    // border-radius: 16rpx;
    width: 336rpx;
    height: 336rpx;
}

.shopping-cart-box {
    // position: absolute;
    // bottom: 14rpx;
    width: 100%;
    padding: 0 12rpx;
    box-sizing: border-box;
    padding-right: 20rpx;
    text-align: right;
    text {
        color: #ff0000;
        font-size: 18rpx;
        font-weight: 400;
    }
}

.celldetail-t {
    padding: 0 10rpx;
    box-sizing: border-box;

    text {
        width: 264rpx;
        font-size: 24rpx;
        color: #000000;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    view {
        margin: 28rpx 0 0 6rpx;
    }
}

.title {
    width: 100vw;
    display: flex;
    justify-content: space-between;
    align-content: center;
    padding: 28rpx 40rpx;
}

.goodListTitle {
    font-weight: 500;
    color: #333333;
    font-size: 32rpx;
    display: inline-block;
}

.chickenImage {
    padding: 0rpx 32rpx 20rpx;
}
.u_parse{
	padding: 0 32rpx;
}
</style>
